<script setup lang="ts">
import Label from '@/components/common/Label.vue';
import Subset from '@/components/subset/subset.vue'
import Articles from '@/components/article/Article.vue';
import SmallSearch from '@/components/common/smallSearch.vue'
import SearchKeywords from '@/components/common/searchKeywords.vue'
import { ref} from 'vue';

const subsetId = ref<number | string>(-1);

const changeSubsetId = (id: number | string) => {
  subsetId.value = id;
}
// 搜索内容
const searchTerm = ref<string>('');
const getSearchTerm = (term: string) => {
  searchTerm.value = term;
}

</script>

<template>
  <div class="flex flex-col justify-center items-center">

    <!-- 头部搜索+图片背景 -->
    <SmallSearch @search="getSearchTerm" />
    <!-- 标签展示 -->
    <Label />
    <!-- 文章分类 -->
    <div v-show="!searchTerm" class="w-full flex justify-center items-center">
      <Subset class="my-5 rounded-lg shadow-1" @nowSubsetId="changeSubsetId" :classify="0" />
    </div>
    <!-- 搜索词提示 -->
    <SearchKeywords :searchTerm="searchTerm" @cancelSearch="getSearchTerm" />
    <!-- 内容部分 -->
     <div>
    <Articles :page-size="4" :subsetId="subsetId" :searchTerm="searchTerm"  />
    </div>
  </div>
</template>

<style scoped>
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

.icon--large {
  width: 2em;
  height: 2em;
}
</style>
